<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zTree</title>
    <link rel="stylesheet" href="../../css/zTreeStyle.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../../js/jquery.ztree.exedit.js"></script>
</head>
<body>
<div>
    <ul id="tree" class="ztree"></ul>
</div>
<button onclick="getDate()">查看tree全部数据</button>
</body>
<script>

    $(() => {
        init();
        //setEdit();
    });

    function init() {
        let setting = {
            view: {
                addHoverDom : addHoverDom,
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: ""
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: true,
                removeTitle: "remove",
                renameTitle: "rename"
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    let zTree = $.fn.zTree.getZTreeObj("tree");
                    console.log(treeId, 111, treeNode);
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        console.log(treeId, treeNode);
                        return true;
                    }
                },
                beforeRemove: function (treeId, treeNode) {
                    console.log("删除", treeId, 111, treeNode);
                }
            }
        };

        $.ajax({
            type: "Get",
            url: "http://localhost:29001/api/customize/method",   //ajax请求地址
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data); //加载数据
            },
        });
    }

    function setEdit() {
        let zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.setting.edit.showRemoveBtn = true;
        zTree.setting.edit.showRenameBtn = true;
        zTree.setting.edit.removeTitle = "remove";
        zTree.setting.edit.renameTitle = "rename";
    }

    var newCount = 1;
    function addHoverDom(treeId,treeNode){
        let zTree = $.fn.zTree.getZTreeObj("tree");
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='添加子节点' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            //在这里向后台发送请求保存一个新建的叶子节点，父id为treeNode.id,让后将下面的100+newCount换成返回的id
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});
            return false;
        });
    }

    function getDate() {
        let treeObj = $.fn.zTree.getZTreeObj("tree");
        let nodes = treeObj.getNodes();
        let arr = new Array();

        console.log(111, nodes);
        eachToArray(nodes, arr);
        console.log(arr);
    }

    function eachToArray(arr, result) {
        $.each(arr, function (index, value) {
            console.log(value, value.children);
            if(value.children !== null && value.children !== undefined && value.children.length > 0) {
                eachToArray(value.children, result);
            }
            result.push({
                id: value.id,
                name: value.name,
                pid: value.pid,
                level: value.level + 1
            });
        });
    }

</script>
</html>